<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>上传信息</title>

    <link href="css/admin.css" rel="stylesheet" type="text/css">
    <link href="css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="css/personal.css" rel="stylesheet" type="text/css">
    <link href="css/refstyle.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <script src="js/common.js"></script>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/amazeui.js" type="text/javascript"></script>
</head>
<body>
<!-------------------------------------- 头部开始 -------------------------------------->
<div id="app">
    <top></top>
    <bar></bar>
    <b class="line"></b>
    <!-------------------------------------- 头部结束 -------------------------------------->

    <!-------------------------------------- 内容开始 -------------------------------------->

    <div class="center">
        <div class="col-main">
            <div class="main-wrap">
                <!--------------------------------------标题开始 -------------------------------------->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">上传信息</strong> / <small>Upload
                        information </small></div>
                </div>

                <hr>


                <!--------------------------------------左侧信息开始 -------------------------------------->
                <div class="refund-aside">

                    <!--------------------------------------图片纯属美观（固定） -------------------------------------->
                    <div class="item-pic">
                        <a href="#" class="J_MakePoint">
                            <img src="images/receive.png" class="itempic">
                        </a>
                    </div>
                    <!--------------------------------------地址，客户名，电话，维修人员 -------------------------------------->
                    <div class="item-title">

                        <div class="item-name">
                            <a href="#">
                                <p class="item-basic-info">地址：</p>
                                <p class="item-basic-info">{{order.address.detail}}</p>
                            </a>
                        </div>
                        <div class="info-little">
                            <span>客户名称：{{order.userinfo.name}}</span>
                            <br>
                            <span>客户电话：{{order.phone}}</span>
                            <br>
                            <span>维修人员：{{order.workers.name}}</span>
                            <br>

                        </div>
                    </div>
                    <!--------------------------------------订单编号，材料费，人工费，总计，开始时间，结束时间 -------------------------------------->
                    <div class="item-info">
                        <div class="item-ordernumber">
                            <span class="info-title">订单编号：</span><a>{{order.id}}</a>
                        </div>
                        <div class="item-amount">
                            <span class="info-title">材&nbsp;&nbsp;&nbsp;料&nbsp;&nbsp;&nbsp;费：</span><span
                                class="amount">{{order.materialsPrice}}元</span>
                        </div>
                        <div class="item-pay-logis">
                            <span class="info-title">人&nbsp;&nbsp;&nbsp;工&nbsp;&nbsp;&nbsp;费：</span><span class="price">{{order.workersPrice.price}}</span>
                        </div>
                        <div class="item-amountall">
                            <span class="info-title">总&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;计：</span><span
                                class="amountall">{{order.ordersPrice}} 元</span>
                        </div>
                        <div class="item-time">
                            <span class="info-title">开始时间：</span><span
                                class="time">{{order.appointmentStartTime}}</span>
                        </div>
                        <div class="item-time">
                            <span class="info-title">完成时间：</span><span class="time">{{order.appointmentEndTime}}</span>
                        </div>

                    </div>
                    <div class="clear"></div>
                </div>

                <!--------------------------------------左侧信息结束 右侧信息开始-------------------------------------->
                <div class="refund-main">
                    <div class="item-comment">

                        <div class="am-form-group">
                            <label for="refund-type" class="am-form-label">维修进度</label>
                            <div class="am-form-content">
                                <label for="refund-type" class="am-form-label">{{order.state.stateValue}}</label>
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="refund-reason" class="am-form-label">故障类型</label>
                            <div class="am-form-content">
                                <select @change="faultTypeName($event)">

                                    <option v-for="faultType,index in faultTypes">{{faultType.title}}</option>

                                </select>
                            </div>
                        </div>


                        <div class="am-form-group">
                            <label for="refund-reason" class="am-form-label">耗材消耗</label>
                            <div class="am-form-content">
                                <select @change="changeProduct($event)">
                                    <option selected v-for="materialsType,index in materialsTypes"
                                            v-model="materialsType.id">{{materialsType.title}}
                                    </option>


                                </select>
                                <select @change="materialsName($event)">
                                    <option selected v-for="materials,index in materialsNames">
                                        {{materials.title}}
                                    </option>

                                </select>


                                &nbsp;&nbsp;&nbsp;


                                <!--------------------------------------这里还有一个耗材数量-------------------------------------->
                                &nbsp;
                                <input type="tel" id="user-code" v-model.trim="zong" placeholder="耗材数量"
                                       style="width: 100px;">
                                &nbsp;&nbsp;&nbsp;



                            </div  >

                            <div  v-for="addMaterialsName,index in addMaterialsNames">

                                <div >
                               <nobr class="item-basic-info">{{addMaterialsName.materialsName.title}}</nobr>
                               <nobr  class="item-basic-info">{{addMaterialsName.materialsName.price}}元</nobr>
                                    <button type="button" class="am-btn am-btn-danger" @click=" daletmn(addMaterialsName.id)">删除</button>
                                </div>
                            </div>
                        </div>
                    </div>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <!--------------------------------------上传照片，提交信息-------------------------------------->

                    <div class="refund-tip">
                        <div class="filePic">
                            <input type="file" value="选择凭证图片" name="file" max="5" maxsize="5120"
                                   allowexts="gif,jpeg,jpg,png,bmp" accept="image/*" @change="loadFile($event)">
                            <img :src="imgData" alt="" height="50px">
                        </div>

                        <span class="desc">上传凭证&nbsp;最多三张</span>
                    </div>
                    <div class="info-btn">
                        <div class="am-btn am-btn-danger" @click="upload">提交信息</div>
                    </div>
                </div>
            </div>
            <!--------------------------------------右侧信息结束-------------------------------------->
            <!-------------------------------------- 内容结束 -------------------------------------->
            <!-------------------------------------- 尾部开始 -------------------------------------->
            <end></end>
        </div>
        <!-------------------------------------- 尾部结束 -------------------------------------->

        <!-------------------------------------- 侧边导航栏开始 -------------------------------------->

        <aside class="menu">
            <ul>
                <li class="person">
                    <a href="index.html"><font size="5px">个人中心</font></a>
                </li>
                <li class="person">
                    <ul>
                        <li><a href="Phone.html">电话修改</a></li>
                        <li><a href="bonus.html">安全设置</a></li>
                    </ul>
                </li>
                <li class="person">
                    <a href="Snatching.html"><font size="5px">抢单</font></a>

                </li>
                <li class="person">
                    <a><font size="5px">当前订单</font></a>
                    <ul>
                        <li><a href="news.html">订单信息</a></li>
                        <li><a href="buass.html">信息确定</a></li>
                        <li><a href="affirm.html">确定上门</a></li>
                        <li class="active"><a href="refund.html">上传信息</a></li>
                    </ul>
                </li>
                <li class="person">
                    <a href="billist.html"><font size="5px">全部订单</font></a>
                    <ul>
                        <li><a href="accomplish.html">已完成 </a></li>
                        <li><a href="rough.html">未完成</a></li>
                        <li><a href="assess.html">待评价</a></li>
                    </ul>
                </li>

                <li class="person">
                    <a><font size="5px">系统设置</font></a>
                    <ul>

                        <li><a href="#">主题</a></li>
                        <li><a href="#">设置</a></li>
                    </ul>
                </li>

            </ul>
        </aside>
    </div>
</div>

<!-------------------------------------- 侧边导航栏结束 -------------------------------------->
</body>
</html>


<script>

    var app = new Vue({
        el: "#app",
        data: {
            path: 'http://localhost:8080/',
            file: '',
            admin: {},
            message: '',
            profile: '',
            imgData: 'images/image.jpg',
            order: {},
            id: "",
            price: "",
            faultTypes: {},
            materialsTypes: {},
            materialsNames: {},
            materialsTypeName: "",
            faultTypeName1: "",
            materialsName1: "",
            zong: "",
            states: {},
            stateName1: "",
            addMaterialsNames:""

        },
        created: function () {
            this.getUrlParam();
            console.log(this.id)
            axios.post("http://localhost:8080/worker/detailed?id=" + this.id)
                .then(res => {
                    this.order = res.data.data;
                    this.price = this.order.materialsPrice + this.order.workersPrice.price;
                })
            axios.post("http://localhost:8080/worker/faultType").then(
                res => {
                    this.faultTypes = res.data.data;

                }
            )
            axios.post("http://localhost:8080/worker/materialsType").then(
                res => {
                    this.materialsTypes = res.data.data;

                }
            )
            axios.post("http://localhost:8080/worker/state").then(
                res => {
                    this.states = res.data.data;
                    console.log(this.states)
                }
            )
            axios.post("http://localhost:8080/worker/selectInsert?id="+this.id).
            then(res=>{
                this.addMaterialsNames=res.data.data;
                console.log(this.addMaterialsNames)
                console.log(this.id)
            })

        },
        methods: {
            daletmn: function (id) {
            alert(id)
                $(this).parent().parent().remove()
           axios.post("http://localhost:8080/worker/deletMaterialsUse?id="+id).
           then(

               res=>{
                   alert(res.data.message)
               }
           )
            },
            materialsName($event) {
                this.materialsName1 = event.target.value;

            },
            faultTypeName($event) {
                this.faultTypeName1 = event.target.value;


            },
            stateName: function (event) {
                this.stateName1 = event.target.value; //获取option对应的value值
                console.log("state" + this.stateName1)
            },
            changeProduct(event) {
                this.materialsTypeName = event.target.value; //获取option对应的value值
                axios.post("http://localhost:8080/worker/materialsName?materialsTypeName=" + this.materialsTypeName
                ).then(
                    res => {
                        this.materialsNames = res.data.data;

                    }
                )

            },

            getUrlParam: function () {
                var url = location.search;
                var theParam = 0;
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    this.id = str.substr(3)


                }

            },
            upload: function () {
                console.log(this.materialsTypeName);
                axios.post("http://localhost:8080/worker/save?materialsTypeName="+this.materialsTypeName+"&faultTypeName="+this.faultTypeName1+"&materialsName="+this.materialsName1+"&stateName="+this.stateName1+"&id="+this.order.id,{
                    headers: {
                        'content-type': 'application/x-www-form-urlencoded；charset=GB2312'
                    }
                })
                    .then(
                        res => {
                            // this.materialsNames=res.data.data;
                            alert(res.data.message);

                        }
                    )
                var formData = new FormData();
                formData.append('file', this.file);

                axios.post("http://localhost:8080/worker/upload?id=" + this.id, formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(function (response) {
                    // 请求成功
                    alert("上传成功");
                    console.log(response.data)
                    this.file = response.message;
                    this.imgdata = this.path + 'adminImages/' + this.file;
                }, function (err) {
                    alert("上传失败")

                });
                this.showUpload = false;

                axios.post("http://localhost:8080/worker/selectInsert?id="+this.id).
                then(res=>{
                    this.addMaterialsNames=res.data.data;
                    console.log(this.addMaterialsNames)
                    console.log(this.id)
                })

            },
            loadFile: function (event) {
                this.file = event.target.files[0];
                console.log(this.file);
                var fileReader = new FileReader();
                fileReader.onload =
                    e => {
                        var base64 = e.target.result;
                        this.imgData = base64;
                    }
                fileReader.readAsDataURL(this.file);

            }

        }

    });
</script>